React Native এর বেসিক Animation API

React Native তে অ্যাপ্লিকেশনে অ্যানিমেশন যোগ করতে বিভিন্ন উপায়ে Animation API ব্যবহার করা যায়। React Native-এ স্ট্যান্ডার্ড অ্যানিমেশন API দুটি প্রধান অংশে বিভক্ত:

1. Animated API (ব্যবহারযোগ্য, বিশেষ করে সরল অ্যানিমেশনগুলির জন্য)
2. LayoutAnimation API (ডিফল্টে অ্যানিমেশন প্রয়োগ করতে সহজ)

এখানে, Animated API সম্পর্কে বেসিক ধারণা এবং কিভাবে এটি কাজ করে তা বিস্তারিতভাবে ব্যাখ্যা করা হবে।

Animated API Overview

React Native এর Animated API আপনাকে অ্যানিমেশন তৈরি করতে এবং নিয়ন্ত্রণ করতে সাহায্য করে। এটি অনেক ধরনের অ্যানিমেশন প্রদান করে, যেমন ডিগ্রী পরিবর্তন, স্কেলিং, পজিশনিং পরিবর্তন, এবং আরো অনেক কিছু।

Animated API ৩টি গুরুত্বপূর্ণ অংশ নিয়ে গঠিত:

1. Animated.Value - একটি অ্যানিমেটেড মান যা স্টেট বা স্ন্যাপশট রাখতে পারে।
2. Animated.timing() - একটি সময় নির্ধারিত অ্যানিমেশন তৈরি করতে ব্যবহৃত।
3. Animated.spring() - স্প্রিং ভিত্তিক অ্যানিমেশন তৈরি করে, যা বাউন্স এবং গতি সংক্রান্ত আচরণ সৃষ্টি করতে পারে।

Animated API দিয়ে বেসিক অ্যানিমেশন তৈরি

১. Animated.Value

Animated.Value একটি স্টেট বা মানের মতো কাজ করে যা অ্যানিমেশন প্রক্রিয়ার নিয়ন্ত্রণ করে। এটি সাধারণত শুরুতে একটি মান সেট করা হয় এবং পরে তা পরিবর্তিত হয়।

import React, { useRef, useEffect } from 'react';
import { View, Animated, Button } from 'react-native';

const MyComponent = () => {
  const animation = useRef(new Animated.Value(0)).current; // Animated value (initially 0)

  const startAnimation = () => {
    Animated.timing(animation, {
      toValue: 1, // Target value
      duration: 1000, // Duration of the animation in milliseconds
      useNativeDriver: true, // Optimization
    }).start(); // Starts the animation
  };

  return (
    <View>
      <Button title="Start Animation" onPress={startAnimation} />
      <Animated.View
        style={{
          opacity: animation, // Animated property (opacity)
          width: 100,
          height: 100,
          backgroundColor: 'blue',
        }}
      />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

• Animated.Value(0) দিয়ে একটি অ্যানিমেটেড মান তৈরি করা হয়েছে।
• Animated.timing() দিয়ে নির্দিষ্ট সময়ে মান পরিবর্তনের জন্য অ্যানিমেশন তৈরি করা হয়েছে।
• animation এর মান যখন 0 থেকে 1 হয়, তখন opacity 0 থেকে 1 পরিবর্তিত হবে এবং UI উপাদানটি আস্তে আস্তে দৃশ্যমান হবে।

২. Animated.timing()

Animated.timing() সময় ভিত্তিক অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এটি একটি নির্দিষ্ট সময়ের মধ্যে উপাদানের মান পরিবর্তন করে।

import React, { useRef, useEffect } from 'react';
import { View, Animated, Button } from 'react-native';

const MyComponent = () => {
  const scale = useRef(new Animated.Value(1)).current; // Initial scale value

  const startAnimation = () => {
    Animated.timing(scale, {
      toValue: 2, // Scale the element to twice its size
      duration: 1000, // Animation duration in milliseconds
      useNativeDriver: true, // Optimize performance with native driver
    }).start(); // Start the animation
  };

  return (
    <View>
      <Button title="Scale Up" onPress={startAnimation} />
      <Animated.View
        style={{
          transform: [{ scale: scale }], // Apply scale transformation
          width: 100,
          height: 100,
          backgroundColor: 'green',
        }}
      />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

• scale একটি Animated.Value হিসেবে সেট করা হয়েছে।
• Animated.timing() দিয়ে scale প্রপার্টি এক্ষেত্রে ১ থেকে ২ পরিবর্তিত হচ্ছে, এবং transform ব্যবহার করে scale প্রপার্টি অ্যাপ্লাই করা হয়েছে।

৩. Animated.spring()

Animated.spring() একটি স্প্রিং-বেসড অ্যানিমেশন তৈরি করে, যেখানে অ্যানিমেশনটি আরো বouncy বা fluid মনে হয়, সাধারণত কিছু স্থিতিশীলতা সহ।

import React, { useRef } from 'react';
import { View, Animated, Button } from 'react-native';

const MyComponent = () => {
  const position = useRef(new Animated.Value(0)).current; // Initial position value

  const startSpringAnimation = () => {
    Animated.spring(position, {
      toValue: 200, // Target position
      friction: 5, // How much the spring resists
      tension: 50, // How strong the spring is
      useNativeDriver: true, // Optimizing performance
    }).start(); // Start the spring animation
  };

  return (
    <View>
      <Button title="Spring Animation" onPress={startSpringAnimation} />
      <Animated.View
        style={{
          transform: [{ translateX: position }], // Apply translation
          width: 100,
          height: 100,
          backgroundColor: 'red',
        }}
      />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

• position একটি Animated.Value হিসেবে প্রথমে 0 সেট করা হয়েছে।
• Animated.spring() ব্যবহার করে একটি স্প্রিং অ্যানিমেশন তৈরি করা হয়েছে, যা উপাদানটিকে translateX প্রপার্টির মাধ্যমে স্থানান্তরিত করে।

সম্ভাব্য আরও অ্যানিমেশন ফিচার

• Animated.parallel(): একাধিক অ্যানিমেশন একসাথে চালানোর জন্য ব্যবহৃত হয়।
• Animated.sequence(): একাধিক অ্যানিমেশন ধারাবাহিকভাবে চালানোর জন্য ব্যবহৃত হয়।
• Animated.delay(): অ্যানিমেশন শুরু হওয়ার আগে একটি নির্দিষ্ট সময়ের বিলম্ব যোগ করার জন্য ব্যবহৃত হয়।

সারাংশ

React Native এর Animated API ব্যবহার করে আপনি সহজেই অ্যানিমেশন তৈরি করতে পারেন। এতে Animated.Value, Animated.timing(), এবং Animated.spring() এর মতো কার্যকরী ফাংশন ব্যবহার করা হয় যা আপনাকে সময়ভিত্তিক বা স্প্রিং-বেসড অ্যানিমেশন তৈরিতে সহায়ক। এটি আপনাকে অ্যাপ্লিকেশনের মধ্যে ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ইউআই তৈরি করতে সাহায্য করে।